import React, { Component } from 'react';
import { Swiper } from 'antd-mobile'
import axios from 'axios';
import { connect } from 'react-redux'
class Carousel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            swiperdata:[]

        }
    }
    componentDidMount(){
        axios.get("/api/swiper").then((res)=>{
            this.setState({
                swiperdata:res.data.list
            })
        })
    }
    
    render() {
        return (
            <div className="carousel">
              <Swiper autoplay autoplayInterval={1000}>
                    {
                        this.state.swiperdata.map((item,index)=>{
                            return (
                                <Swiper.Item key={index}>
                                    <a href={item.link}><img src={item.icon} alt="" /></a>
                                </Swiper.Item>
                            )
                        })
                    }
                </Swiper>
                {/* <div className="btns">
                    {
                        this.state.btns.map((item,index)=>{
                            return (
                                <div className={ `${this.state.i==index?'active':'' }` }  key={index} onClick={  ()=>{  this.setState({ i : index }); this.props.history.push(item.link) }}> {item.btn} </div>
                            )
                        })
                    }
                    
                </div> */}
                
            </div>
        );
    }
}


export default connect( ()=>{
    
    return {
        
    }
},()=>{
    return {
       
    }
} )( Carousel );